import { defineComponent, reactive, ref, computed } from "vue";
import LForm, { LFormItem } from "@/components/public/lForm/lForm";
import styles from "./add.module.less";
import { message } from "ant-design-vue";
import LPopup from "@/components/public/lPopup/lPopup";
import { useStore as useUserStore } from "@/store/user";
import { $getAreaList, $getForthArea } from "@/api/common/common";
export default defineComponent({
  props: {
    service: {
      type: Object,
      required: true,
    },
  },
  emits: ["cancel", "confirm"],
  setup(props, { emit, expose }) {
    const userStore = useUserStore();
    const state = reactive({
      id: null,
      treeData: [
        {
          label: "出单机构",
          value: 1,
        },
        {
          label: "推广机构",
          value: 2,
        },
      ],
      form: {
        type: null,
        pid: userStore.isSuperAdmin ? 0 : userStore.channel_id,
        name: null,
        province_id: 933,
        city_id: null,
        area_id: null,
        street_id: null,
        status: 1,
      },
      cityID: 933,
      cityArray: [],
      areaArray: [],
      streetArray: [],
      cityState: {
        visible: false,
        disabled: false,
      },
      areaState: {
        visible: false,
        disabled: false,
      },
      streetState: {
        visible: false,
        disabled: false,
      },
    } as any);
    // 是否为编辑
    const isEdit = computed(() => {
      return !!state.id;
    });
    const cancelHandler = () => {
      addPopupRef.value.close();
    };
    const confirmHandler = (e: any) => {
      if (isEdit.value) {
        e.form.id = state.id;
        props.service.edit(e.form).then((res: any) => {
          message.success("编辑一级渠道成功");
          emit("confirm");
        }).finally(() => {
          e.done();
        })
      } else {
        props.service
          .add(e.form)
          .then((res: any) => {
            message.success("添加一级渠道成功,默认初始密码123456");
            emit("confirm");
          })
          .finally(() => {
            e.done();
          });
      }
    };
    //市区县
    const city = () => {
      $getAreaList({}).then((res: any) => {
        console.log(3333, state.cityArray);
        res.data.forEach((item: any) => {
          if (item.name === "浙江省") {
            state.cityArray = item.child.map((itemX: any) => {
              return {
                label: itemX.name,
                value: itemX.id,
                area: itemX.child.map((itemY: any) => {
                  return {
                    label: itemY.name,
                    value: itemY.id,
                  }
                })
              }
            })
          }
        })
      })
    }
    city();
    const addPopupRef = ref(null as any);
    const open = (e: any) => {
      state.form.name = null;
      state.form.type = null;
      state.form.city_id = null;
      state.form.area_id = null;
      state.form.street_id = null;
      state.form.pid = userStore.isSuperAdmin ? 0 : userStore.channel_id;
      state.form.status = 1;
      if (userStore.isSuperAdmin) {
        state.cityState.visible = true;
      }
      if (e?.id) {
        state.id = e.id;
        props.service.detail({ id: state.id }).then((res: any) => {
          state.form.type = res?.data?.type || null;
          state.form.pid = res?.data?.pid;
          state.form.name = res?.data?.username || null;
          state.form.city_id = res?.data?.city_id || null;
          state.form.area_id = res?.data?.area_id || null;
          state.form.street_id = res?.data?.street_id || null;
          state.form.status = res?.data?.status;
          if (state.form.city_id) {
            state.cityArray.forEach((item: any) => {
              if (item.value === state.form.city_id) {
                state.areaArray = item.area;
                return;
              }
            })
            if (state.form.area_id) {
              $getForthArea({ area_id: state.form.area_id }).then((res: any) => {
                state.streetArray = res.data.map((item: any) => {
                  return {
                    label: item.name,
                    value: item.id,
                  };
                })
              })
            }
          }
        });
      }
      addPopupRef.value.open();
    };
    const close = () => {
      addPopupRef.value.close();
    };
    expose({
      open,
      close,
    });
    const Components = () => (
      <LPopup title={isEdit.value ? "编辑渠道" : "添加渠道"} ref={addPopupRef}>
        <div class={styles.firstLevelChannelAdd}>
          <div class={styles.firstLevelChannelBody}>
            <LForm
              btns={["cancel", "confirm"]}
              v-model={state.form}
              rules={state.rules}
              onCancel={() => {
                cancelHandler();
              }}
              onConfirm={(e: any) => {
                confirmHandler(e);
              }}
            >
              <LFormItem label="用户名" prop="name">
                <a-input
                  v-model:value={state.form.name}
                  placeholder="用于账号登陆"
                ></a-input>
              </LFormItem>
              <LFormItem label="类型" prop="type">
                <a-select
                  v-model:value={state.form.type}
                  style={{ width: "100%" }}
                  options={state.treeData}
                  placeholder="请选择类型"
                ></a-select>
              </LFormItem>
              {
                state.cityState.visible && (
                  <LFormItem label="所在市" prop="">
                    <a-select
                      v-model:value={state.form.city_id}
                      style={{ width: "100%" }}
                      options={state.cityArray}
                      onSelect={(value: any, option: any) => {
                        state.areaArray = option.area;
                      }}
                      placeholder="请选择所在市"
                      disabled={state.cityState.disabled}
                    ></a-select>
                  </LFormItem>
                )
              }
              {
                state.areaState.visible && (
                  <LFormItem label="所在区县" prop="">
                    <a-select
                      v-model:value={state.form.area_id}
                      style={{ width: "100%" }}
                      options={state.areaArray}
                      placeholder="请选择所在区县"
                      onSelect={(value: any) => {
                        $getForthArea({ area_id: value }).then((res: any) => {
                          console.log(res, value);
                          state.streetArray = res.data.map((item: any) => {
                            return {
                              label: item.name,
                              value: item.id,
                            };
                          })
                        })
                      }}
                      disabled={state.areaState.disabled}
                    ></a-select>
                  </LFormItem>
                )
              }
              {
                state.streetState.visible && (
                  <LFormItem label="所在乡镇/街道" prop="">
                    <a-select
                      v-model:value={state.form.street_id}
                      style={{ width: "100%" }}
                      options={state.streetArray}
                      placeholder="请选择所在乡镇街道"
                      disabled={state.streetState.disabled}
                    ></a-select>
                  </LFormItem>
                )
              }
              <LFormItem label="状态" prop="">
                <a-radio-group
                  v-model:value={state.form.status}
                  name="radioGroup"
                >
                  <a-radio value={1}>启用</a-radio>
                  <a-radio value={0}>禁用</a-radio>
                </a-radio-group>
              </LFormItem>
            </LForm>
          </div>
        </div>
      </LPopup>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components />;
  },
});
